<template>
    <div class="about">
        <el-form :inline="true" :model="queryInfo" class="demo-form-inline">
            <el-form-item label="文章名字">
                <el-input v-model="queryInfo.articleName" placeholder="请输入" clearable />
            </el-form-item>
            <el-form-item label="文章内容">
                <el-input v-model="queryInfo.articleIntroduce" placeholder="请输入" clearable />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="getList">搜索</el-button>
            </el-form-item>
        </el-form>
        <div class="mb20">
            <el-button @click="toAdd" type="primary" icon="Plus" plain>新增</el-button>
            <el-button type="danger" icon="Delete" plain>删除</el-button>
        </div>
        <el-table stripe:true :data="tableData" style="width: 100%">
            <el-table-column type="selection" width="55" />
            <el-table-column fixed prop="articleId" label="编号" width="60" />
            <el-table-column prop="articleName" label="文章名称" width="120" />
            <el-table-column show-overflow-tooltip prop="articleIntroduce" label="文章介绍" width="120" />
            <el-table-column prop="consultantId" label="咨询师" width="120">
                <template #default="scope">
                    {{ consultants[scope.row.consultantId] }}
                </template>
            </el-table-column>
            <el-table-column prop="tabularchart" label="列表图" width="120">
                <template #default="scope">
                    <img v-if="scope.row.tabularchart" :src="url + scope.row.tabularchart"
                        style="width: 100px; height: 100px;" :fit="fit" />
                </template>
            </el-table-column>
            <!-- <el-table-column prop="articleDetails" label="详情内容" width="120" /> -->
            <el-table-column prop="articleReadNum" label="阅读量" width="80" />
            <el-table-column prop="articleCollects" label="收藏量" width="80" />
            <el-table-column prop="articleTypeId" label="文章分类" width="80">
                <template #default="scope">
                    {{ articleType[scope.row.articleTypeId] }}
                </template>
            </el-table-column>
            <el-table-column prop="articleCreateTime" label="创建时间" width="170" />
            <el-table-column fixed="right" label="操作" min-width="120">
                <template #default="scope">
                    <el-button  type="primary" size="small" @click="toXQ(scope.row.articleDetails)">详情</el-button>
                    <el-button  size="small" @click="toEdit(scope.row)">修改</el-button>
                    <el-button  type="danger" @click="onDel(scope.row.articleId)" size="small">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>

    <el-pagination style="margin-top: 10px;" v-model:current-page="queryInfo.pageNum"
        v-model:page-size="queryInfo.pageSize" :page-sizes="[1, 5, 10, 20]" size="default" background="false"
        layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
        @current-change="handleCurrentChange" />


    <!-- 添加，编辑弹框 -->
    <el-dialog v-model="saveOrUpdateVisible" :title="saveOrUpdateTitle" width="500">
        <el-form :model="publicity">
            <el-form-item label="文章名称" :label-width="formLabelWidth">
                <el-input v-model="article.articleName" autocomplete="off" />
            </el-form-item>
            <el-form-item label="文章介绍" :label-width="formLabelWidth">
                <!-- <quill-editor v-model:value="article.articleIntroduce" /> -->
                <el-input v-model="article.articleIntroduce" autocomplete="off" />
            </el-form-item>
            <el-form-item label="咨询师" :label-width="formLabelWidth">
                <template #default="scope">
                    <el-select v-model="article.consultantId" placeholder="请选择">
                        <el-option v-for="(item, index) in consultants" :key="item" :label="item" :value="index"
                            v-show="item != null">
                        </el-option>
                    </el-select>
                </template>
            </el-form-item>
            <el-form-item label="列表图" :label-width="formLabelWidth">
                <el-upload class="avatar-uploader" v-model:file-list="fileList" list-type="picture-card" action="http://localhost:8080/file/upload"
                    :on-success="handleAvatarSuccess">
                    <el-icon class="avatar-uploader-icon">
                        <Plus />
                    </el-icon>
                </el-upload>
            </el-form-item>
            <el-form-item label="详情内容" :label-width="formLabelWidth">
                <quill-editor v-model:value="article.articleDetails" />
                <!-- <el-input v-model="article.articleDetails" autocomplete="off" /> -->
            </el-form-item>
            <el-form-item label="阅读量" :label-width="formLabelWidth">
                <el-input v-model="article.articleReadNum" autocomplete="off" />
            </el-form-item>
            <el-form-item label="收藏量" :label-width="formLabelWidth">
                <el-input v-model="article.articleCollects" autocomplete="off" />
            </el-form-item>
            <el-form-item label="文章分类" :label-width="formLabelWidth">
                <template #default="scope">
                
                    <el-select v-model="article.articleTypeId"  placeholder="请选择">
                        <el-option v-for="(item, index) in articleType" :key="item" :label="item" :value="index"
                            v-show="item != null">
                        </el-option>
                    </el-select>
                </template>
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="close">取消</el-button>
                <el-button type="primary" @click="saveOrUpdate">
                    {{ saveOrUpdateTitle }}
                </el-button>
            </div>
        </template>
    </el-dialog>
    <el-dialog v-model="xqVisible" :title="xqTitle" width="500">
        <div v-html="xqContent"></div>
        
    </el-dialog>
        
</template>
<script setup>
import { reactive, ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

import axios from 'axios'
import { onMounted } from 'vue'
import QuillEditor from '@/components/QuillEditor.vue';

const imageUrl = ref('');
const fileList = ref([]);
// 图片上传
const handleAvatarSuccess = (response,
    uploadFile) => {
    imageUrl.value = URL.createObjectURL(uploadFile.raw);
    // 一旦上传成功，则需要把返回的数据赋值给article.imageUrl

    article.value.tabularchart = response.data;
    //   console.log('response',response)
    //   console.log('uploadFile',uploadFile)
}

// 修改或添加
// 定义一个变量，来控制添加或修改弹框的显示
const saveOrUpdateVisible = ref(false);
const xqVisible=ref(false)
const xqTitle=ref('')
const xqContent=ref('')
const toXQ=(row)=>{
    xqVisible.value=true;
    xqTitle.value='文章详情';
    xqContent.value=row;
}

const article = ref({
    articleName: '',
    articleIntroduce: '',
    consultantId: '',
    tabularchart: '',
    articleDetails: '',
    articleReadNum: '',
    articleCollects: '',
    articleTypeId: '',
})
const cousultant = ref([])
// 定义一个变量，来控制添加或修改弹框的标题的默认值
const saveOrUpdateTitle = ref('添加');

// 去修改的页面
const toEdit = row => {
    saveOrUpdateVisible.value = true;
    saveOrUpdateTitle.value = '修改';
    article.value = row;
    imageUrl.value = url.value + article.value.tabularchart;
    fileList.value = [{
        name: article.value.tabularchart,
        url: url.value + article.value.tabularchart
       
    }];
    console.log('fileList', fileList.value)
}

// 去添加的页面
const toAdd = () => {
    saveOrUpdateVisible.value = true;
    saveOrUpdateTitle.value = '添加';
    imageUrl.value = '';
    fileList.value = [];
    article.value = {
        articleName: '',
        articleName: '',
        articleIntroduce: '',
        consultantId: '',
        tabularchart: '',
        articleDetails: '',
        articleReadNum: '',
        articleCollects: '',
        articleTypeId: '',
    }

}

// 取消修改或保存
const close = () => {
    saveOrUpdateVisible.value = false;
    imageUrl.value = '';
    fileList.value = [];
    article.value = {
        articleName: '',
        articleName: '',
        articleIntroduce: '',
        consultantId: '',
        tabularchart: '',
        articleDetails: '',
        articleReadNum: '',
        articleCollects: '',
        articleTypeId: '',
    }
}


// 添加或修改
const saveOrUpdate = () => {
    if (saveOrUpdateTitle.value == '添加') {
        // 调用后端接口添加
        axios.post('/article/add', article.value)
            .then(resp => {
                // console.log(resp.data)
                let result = resp.data;  // resp是promise对象，.data返回我们自己的标准R
                if (result.code == 1) {
                    // 重新获取列表

                    getList();

                } else {
                    console.log('添加文章类型失败')
                }
            })
    } else {
        // 调用后端接口修改
        axios.put('/article/edit', article.value)
            .then(resp => {
                // console.log(resp.data)
                let result = resp.data;  // resp是promise对象，.data返回我们自己的标准R
                if (result.code == 1) {
                    // 重新获取列表
                    getList();
                } else {
                    console.log('修改文章类型失败')
                }
            })
    }
    // 关闭弹框
    saveOrUpdateVisible.value = false;
    imageUrl.value = '';
    article.value = {
        articleName: '',
        articleName: '',
        articleIntroduce: '',
        consultantId: '',
        tabularchart: '',
        articleDetails: '',
        articleReadNum: '',
        articleCollects: '',
        articleTypeId: '',
    }
}


// 定义一个路径
const url = ref('http://localhost:8080/file/downLoad?fileName=')

// 定义一个方法当页面加载后立马执行的代码
onMounted(() => {
    // console.log('onMounted');
    getArticleType();
    getList();
    getconsultants();
})
// 定义一个全局的查询参数变量
const queryInfo = ref({
    pageNum: 1,
    pageSize: 10,
    articleId: 0,
    articleName: '',
    articleName: '',
    articleIntroduce: '',
    consultantId: '',
    tabularchart: '',
    articleDetails: '',
    articleReadNum: '',
    articleCollects: '',
    articleTypeId: '',
    articleCreateTime: ''
})
// 定义一个数据总条数
const total = ref(0);
//定义一个方法，来动态的调用后端接口，获取文章列表
const getList = () => {
    // 使用axios调用后端接口获取数据
    axios.get('/article/findAll', {
        params: queryInfo.value
    })
        .then(resp => {
            // console.log(resp.data)
            let result = resp.data;  // resp是promise对象，.data返回我们自己的标准R
            if (result.code == 1) {
                // 更新总条数
                total.value = result.data.total;
                tableData.value = result.data.list;
            } else {
                console.log('获取文章列表失败')
            }
        })

}
let articleType = ref([])


let consultants = ref([])
const getArticleType = () => {
    axios.get('/articleType/findAll')
        .then(resp => {
            let result = resp.data;
            console.log(result.data.list)
            if (result.code == 1) {
                for (let i = 0; i < result.data.list.length; i++) {
                    articleType.value[result.data.list[i].articleTypeId] = result.data.list[i].articleTypeName
                }
                console.log(articleType.value)
            } else {
                console.log('获取文章类型列表失败')
            }
        })
}
const getconsultants = () => {
    axios.get('/consultants/selectAll')
        .then(resp => {
            let result = resp.data;
            console.log(result.data.list)
            if (result.code == 1) {
                for (let i = 0; i < result.data.list.length; i++) {
                    consultants.value[result.data.list[i].consultantId] = result.data.list[i].username
                }
                console.log(consultants.value)
            } else {
                console.log('获取咨询师列表失败')
            }
        })
}
// 分页
const handleSizeChange = (val) => {
    queryInfo.value.pageSize = val;
    queryInfo.value.pageNum = 1;
    getList();
}
const handleCurrentChange = (val) => {
    queryInfo.value.pageNum = val;
    getList();
}
// 删除
const onDel = id => {
    ElMessageBox.confirm(
        '真的要删除吗？',
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            // 调用后端接口删除
            axios.delete('/article/' + id)
                .then(resp => {
                    // console.log(resp.data)
                    let result = resp.data;  // resp是promise对象，.data返回我们自己的标准R 
                    if (result.code == 1) {
                        // 重新获取列表
                        getList();
                        ElMessage({
                            message: '删除成功！',
                            type: 'success',
                        })
                    } else {
                        ElMessage({
                            message: '删除失败！',
                            type: 'warning',
                        })
                    }
                })


        })
        .catch(() => { })
}
const tableData = ref([])

</script>
<style>
.ql-container{
    min-height: 200px;
  }</style>